'use strict';
import  React,{ Component } from "react"

import {
    View,
    Platform,
    StyleSheet,
    Dimensions
} from 'react-native';

import PropTypes from "prop-types";
import TextField from '../textField';
import Color from "../../config/theme/standard/color";

export default class Password extends Component {

    constructor(props) {
        super(props);
        this.textInputRefer = null;

        this.state = {
            showPassword: props.showPassword,
            text: props.defaultValue ? props.defaultValue : '',
            showErrorInfo: this.props.showErrorInfo,
            errorInfo: this.props.errorInfo,
            isWideScreen: false // 鸿蒙适配是否宽屏
        }
    }

    componentDidMount() {
        // 适配鸿蒙折叠屏动态更新组件
        this.addEventListenerScreenWidth = Dimensions.addEventListener('change', this.setIsWideScreen)
    }
    componentWillUnmount() {
        // 适配鸿蒙折叠屏动态更新组件
        if (this.addEventListenerScreenWidth) {
            this.addEventListenerScreenWidth = null
        }
    }
    setIsWideScreen = () => {
        const screenWidth = Dimensions.get('window').width;
        if (screenWidth) {
            this.setState({
                isWideScreen: screenWidth > 500 && screenWidth < 800
            })
        }
    }
    _onChange(text) {
        this.setState({
            text:text,
        });
        if(typeof(this.props.onChangeText) === 'function'){
            this.props.onChangeText(text);
        }
    }

    _onBlur(){
        if(typeof(this.props.onBlur) === 'function'){
            this.props.onBlur(this.state.text);
        }
    }

    _onFocus(){
        if(typeof(this.props.onFocus) === 'function'){
            this.props.onFocus();
        }
    }

    _iconFunc() {
        let showFlag = this.state.showPassword;
        this.setState({
            showPassword:!showFlag
        });
        if (typeof this.props.rightFunc == 'function') {
            this.props.rightFunc();
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (('showErrorInfo' in nextProps) && ('errorInfo' in nextProps)) {
            return {
                showErrorInfo:nextProps.showErrorInfo,
                errorInfo:nextProps.errorInfo
            };
        }
        return null;
    }

    render() {
        const {
            leftIcon,
            title,
            placeholder,
            editable,
            maxLength,
            maxTitleLength,
            textAlign,
            rightImgShow,
            rightImgHide,
            isMerge,
            hasTopBorder,
            textInputStyle,
            keyboardType,
            titleWidth,
            showErrorInfo,
            errorInfo,
            showRightImage,
            selectionColor
        } = this.props;

        let containerHeight = 45;
        if(this.state.showErrorInfo && this.state.errorInfo){
            containerHeight = 67;
        }

        let rightImage = null;
        if(showRightImage){
            if(this.state.showPassword){
                rightImage = rightImgShow ? rightImgShow : require('../../assets/icon_password_eye_open.png');
            }else{
                rightImage = rightImgHide ? rightImgHide : require('../../assets/icon_password_eye_close.png');
            }
        }

        let textInput = [styles.textInputStyle]
        return (
            <View style={{flex:1}}>
                <View style={{minHeight:containerHeight}}>
                {
                    Platform.OS=="ios" ? 
                    <TextField
                        leftIcon={leftIcon}
                        title={title}
                        placeholder={placeholder}
                        onChangeText={(text) => this._onChange(text)}
                        onBlur={() => this._onBlur()}
                        onFocus={() => this._onFocus()}
                        editable={editable}
                        maxLength={maxLength}
                        defaultValue={this.state.text}
                        secureTextEntry={!this.state.showPassword}
                        maxTitleLength={maxTitleLength}
                        textAlign={textAlign}
                        rightImg={[rightImage]}
                        rightFunc={()=>this._iconFunc()}
                        isMerge={isMerge}
                        hasTopBorder={hasTopBorder}
                        textInputStyle={[textInputStyle,textInput]}
                        keyboardType={keyboardType}
                        titleWidth={titleWidth}
                        showErrorInfo={showErrorInfo}
                        errorInfo={errorInfo}
                        selectionColor={selectionColor}
                        isPassword={true}
                    /> :
                    <TextField
                        leftIcon={leftIcon}
                        title={title}
                        placeholder={placeholder}
                        onChangeText={(text) => this._onChange(text)}
                        onBlur={() => this._onBlur()}
                        onFocus={() => this._onFocus()}
                        editable={editable}
                        maxLength={maxLength}
                        defaultValue={this.state.text}
                        secureTextEntry={!this.state.showPassword}
                        maxTitleLength={maxTitleLength}
                        textAlign={textAlign}
                        rightImg={[rightImage]}
                        rightFunc={()=>this._iconFunc()}
                        isMerge={isMerge}
                        hasTopBorder={hasTopBorder}
                        textInputStyle={[textInputStyle,textInput]}
                        keyboardType={keyboardType}
                        titleWidth={titleWidth}
                        showErrorInfo={showErrorInfo}
                        errorInfo={errorInfo}
                        isPassword={true}
                    />
                }
                </View>
            </View>
        );
    }
}

Password.propTypes = {
    /**
     * 左侧图标
     */
    leftIcon: PropTypes.any,
    /**
     * 文字标签
     */
    title: PropTypes.string,
    /**
     * 用户输入时触发的方法
     */
    onChangeText: PropTypes.func,
    /**
     * 失去光标时触发的方法
     */
    onBlur: PropTypes.func,
    /**
     * placeholder
     */
    placeholder: PropTypes.string,
    /**
     * 是否可编辑
     */
    editable : PropTypes.bool,
    /**
     * 输入框样式
     */
    textInputStyle : PropTypes.array,
    /**
     * 获取焦点事件
     */
    onFocus : PropTypes.func,
    /**
     * 输入框最大输入字数
     */
    maxLength:PropTypes.number,
    /**
     * 默认值
     */
    defaultValue:PropTypes.string,
    /**
     * 文字标签的最大字数
     */
    maxTitleLength:PropTypes.number,
    /**
     * 对齐方式
     */
    textAlign:PropTypes.string,
    /**
     * 右侧图标1
     */
    rightImgShow:PropTypes.any,
    /**
     * 右侧图标2
     */
    rightImgHide:PropTypes.any,
    //右侧第一个图标的点击事件
    rightFunc: PropTypes.func,
    isMerge: PropTypes.bool,
    //是否跨行合并
    hasTopBorder: PropTypes.bool,
    //是否有上边框
    showErrorInfo: PropTypes.bool,
    //是否开启错误提示
    errorInfo: PropTypes.string,
    //错误提示语
    //当前选中项与推荐选择项不符，且开启错误提示时，展示错误提示语
    //弹起键盘类型
    keyboardType: PropTypes.oneOf(['default','numeric','email-address','phone-pad']),
    //title区域宽度
    titleWidth: PropTypes.number,
    //是否明文显示密码
    showPassword : PropTypes.bool,
    showRightImage:PropTypes.bool,
    //设置输入框高亮时的颜色（在iOS上还包括光标）
    selectionColor:PropTypes.string
};

Password.defaultProps = {
    editable: true,
    maxLength: 50,
    maxTitleLength: 5,
    textAlign: 'left',
    isMerge: false,
    hasTopBorder: false,
    showErrorInfo:false,
    errorInfo:'',
    keyboardType:"default",
    placeholder:'请输入密码',
    showPassword:false,
    showRightImage:true,
    selectionColor:'#666666'
};
const styles = StyleSheet.create({
    textInputStyle: {
        color: Color.input.password.input,
    }
});